"""
@author: Gaoyaoxia
@date: 2021-03-03 17:32:40
"""
<!-- 委员履职详情-->
<template>
  <div class="base-table-box">
    <div class="list-search">
      <!-- 检索 -->
      <div class="list-search-simple">
        <div class="search-inline">
          <div class="search-item">
            <s-select
              :selectOption="strSIds"
              v-model="params.strSId"
              style="width: 80px"
            ></s-select>
            <s-select
              :selectOption="member.sectorType"
              v-model="params.strSector"
              style="width: 90px"
            ></s-select>
            <s-select
              :selectOption="member.infoType"
              v-model="params.type"
              style="width: 102px"
            ></s-select>
          </div>
          <div class="search-item">
            <a-input placeholder="请输入搜索内容" />
          </div>

          <div class="search-item btn-group">
            <a-button type="primary" @click="onSearch">查询</a-button>
            <a-button class="btn-reset" @click="onReset">重置</a-button>
            <a-button type="primary" @click="openDrop" class="high-search-btn">
              <i class="icon suncnui suncnui-icon-shaixuanchaxun" />
              高级查询
            </a-button>
          </div>
        </div>
      </div>
      <!-- 高级检索 -->
      <drawer
        :show="isShowForm"
        :active="isActive"
        :close="isClose"
        @closeDrop="closeDrop"
      >
        <mem-high-form @search="onHighSearch" type="sessionMgt"></mem-high-form>
      </drawer>
    </div>
    <!-- 列表 -->
    <a-table
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange
      }"
      :pagination="pagination"
      :columns="columns"
      :data-source="tableData"
      :loading="loading"
      :scroll="{ x: 820, y: 627 }"
      style="margin-top: 20px"
    >
      <span slot="name" slot-scope="text, record">
        <router-link
          class="link-a"
          target="_blank"
          :to="{
            path: '/memberResume/detail',
            query: { id: record.id }
          }"
          >{{ text }}</router-link
        >
      </span>
      <span slot="action" slot-scope="text, record">
        <router-link
          :to="{
            path: 'memsessionlist/upatemember',
            query: { id: record.id }
          }"
          >修改</router-link
        >
        <a @click="onDelete(record)" class="btn-space">删除</a>
      </span>
    </a-table>
  </div>
</template>

<script>
import MenuButton from 'components/base/menuButton.vue'
import { member } from 'assets/js/select-option-list'
import paging from 'mixins/paging'
import Drawer from 'components/base/drawer.vue'
import MemHighForm from 'components/form/memHighForm.vue'
const columns = [
  {
    title: '序号',
    dataIndex: 'key',
    width: 100
  },
  {
    title: '姓名',
    dataIndex: 'name',
    width: 150,
    scopedSlots: { customRender: 'name' },
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '出生日期',
    dataIndex: 'birthday',
    width: 120
  },
  {
    title: '民族',
    dataIndex: 'nation',
    width: 100,
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '学历',
    dataIndex: 'education',
    width: 120,
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '界别',
    dataIndex: 'strSector',
    width: 120,
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '党派',
    dataIndex: 'strFaction',
    width: 120,
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '届中状态',
    dataIndex: 'memStatus',
    width: 120,
    align: 'center',
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '是否常委',
    dataIndex: 'isCommittee',
    width: 120,
    align: 'center',
    sorter: (a, b) => a.name.length - b.name.length
  }
]

export default {
  components: {
    MenuButton,
    Drawer,
    MemHighForm
  },
  data() {
    return {
      columns,
      member,
      menuList: [
        { key: 'memImport', label: '委员导入' },
        { key: 'setColNum', label: '设置列数' },
        { key: 'sessionResize', label: '届中调整' }
      ],
      //高级检索表单
      isShowForm: false,
      isActive: false,
      isClose: true,
      //普通检索参数
      strSIds: [
        { key: '0', label: '1404' },
        { key: '1', label: '1304' }
      ],
      params: {
        strSId: '1404',
        strSector: '',
        type: ''
      },
      //table相关
      loading: false,
      tableData: []
    }
  },
  mixins: [paging],
  mounted() {
    this.getTableData()
  },
  methods: {
    getTableData() {
      for (let i = 0; i < this.pagination.pageSize; i++) {
        this.tableData.push({
          id: `ID${i}`,
          key: i,
          name: `King ${i}`,
          sex: '男',
          education: '本科',
          strSector: '民革',
          strFaction: '中共',
          memStatus: '正常',
          isCommittee: '否',
        })
      }
      this.pagination.total = 200
    },

    //新增委员信息
    add() {
      this.$router.push('memsessionlist/addmember')
    },
    //删除该委员记录
    onDelete(record) {
      console.log(record)
      this.$confirm({
        title: '您是否确认要操作所选中的记录？',
        onOk() {
          //请求删除接口
        },
        onCancel() {}
      })
    },
    /**普通检索的查询和重置回调 */
    onSearch() {
      console.log('参数:', this.params)
    },
    /**高级检索的查询和重置回调 */
    onHighSearch(formParam) {
      this.params = Object.assign(this.params, formParam)
      console.log('参数:', this.params)
    },
    onReset() {
      this.params = {
        strSId: '1404',
        strSector: '',
        type: ''
      }
    },
    //高级检索表单展开事件
    openDrop() {
      setTimeout(() => {
        this.isShowForm = true
        this.isActive = true
      }, 300)
      this.isClose = false
    },
    //高级检索表单收起事件
    closeDrop() {
      this.isClose = true
      setTimeout(() => {
        this.isShowForm = false
      }, 200)
    }
  },
  created() {}
}
</script>
<style lang='less' scoped>
/deep/.ant-form {
  padding: 0px 0px 0px 15px;
}
/**table样式 */
/deep/.ant-table-content {
  border: none;
}
/deep/.ant-table-wrapper > div > div > div > div > div {
  border: 1px solid #e8e8e8;
}
</style>